<template>
  <continer>
    <template slot="content">
      <el-form class="m7-form" :label-position="labelPosition" :model="formData" size="mini" :rules="rules" ref="nodeForm">
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini" maxlength="40"></el-input>
        </el-form-item>
        <el-collapse v-model="activeNames" @change="collapseChange">
          <el-collapse-item title="分支设置" name="branch">
            <draggable v-model="condition" :handle="'.V7_iconV7tubiao_yidong'">
              <div v-for="(branchItem, branchIndex) in condition" :key="branchIndex" class="item">
                <template v-if="branchIndex < condition.length - 1" class="branchItem">
                  <span class="V7_iconfont V7_iconV7tubiao_yidong" v-if="condition.length > 2"></span>
                  <p class="label">分支名：<span v-if="condition.length > 2" class="fr V7_iconfont V7_iconV7tubiao_shanchu" @click="delBranch(branchIndex)"></span></p>
                  <el-input maxlength="40" v-model="branchItem.name" size="mini" placeholder="请输入分支名" @input="selectChange(branchItem.name, branchIndex)"></el-input>
                  <div class="conditionsBox">
                    <p class="label">分支条件</p>
                    <div class="conditionItem">
                      <span class="text">且</span>
                      <div class="lineItem" v-for="(branchCondiItem, branchCondiIndex) in branchItem.customValue[0].branchCondiArr" :key="branchCondiIndex">
                        <span class="line"></span>
                        <div class="condition">
                          <div>
                            <p class="label">类型：</p>
                              <el-select v-model="branchCondiItem.parameterType"
                                @change="parameChange(branchCondiItem.parameterType, branchIndex, branchCondiIndex)">
                                <el-option value="custom" label="自定义参数"></el-option>
                                <el-option value="system" label="系统参数"></el-option>
                              </el-select>
                          </div>
                          <div>
                            <p class="label">参数：</p>
                            <zbTipInput v-if="branchCondiItem.parameterType === 'custom'"
                              class="ipt" maxlength="100"
                              v-model="branchCondiItem.parameter" size="mini" placeholder="请输入">
                            </zbTipInput>
                            <el-select v-else v-model="branchCondiItem.parameter" placeholder="请选择">
                              <el-option :value="systemItem.value" :label="systemItem.label" v-for="systemItem in systemOpt" :key="systemItem.value">
                              </el-option>
                            </el-select>
                          </div>
                          <div>
                            <p class="label">条件：</p>
                            <el-select v-model="branchCondiItem.conditions">
                              <template v-if="branchCondiItem.parameterType === 'custom'">
                                <el-option v-for="item in selectOpt"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </template>
                              <template v-else>
                                <el-option label="等于" value="eq"></el-option>
                                <el-option label="不等于" value="neq"></el-option>
                              </template>
                            </el-select>
                          </div>
                          <div class="label">
                            <p class="label">值：</p>
                            <div v-if="branchCondiItem.parameterType === 'custom'">
                              <zbTipInput v-if="['eq', 'neq'].includes(branchCondiItem.conditions)"
                                class="ipt" maxlength="100" v-model="branchCondiItem.value"
                                size="mini" placeholder="请输入">
                              </zbTipInput>
                              <el-select v-else v-model="branchCondiItem.value" multiple filterable
                                allow-create default-first-option no-data-text="请输入内容" placeholder="请输入内容">
                              </el-select>
                            </div>
                            <div v-else>
                              <el-select v-model="branchCondiItem.value">
                                <el-option v-for="item in platformOpt"
                                  :key="item._id"
                                  :label="item.name"
                                  :value="item._id">
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                          <div class="delCondition">
                            <span class="V7_iconfont V7_iconV7tubiao_shanchumian"
                              @click="delCondition(branchIndex, branchCondiIndex)"
                              v-show="branchItem.customValue[0].branchCondiArr.length > 1">
                            </span>
                          </div>
                        </div>
                      </div>
                      <div>
                        <el-button type="text" @click="addCondition(branchIndex)" class="addCondition">
                          <i class="V7_iconV7tubiao_xinzeng V7_iconfont iconfont-left"></i>
                          添加条件
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <p class="label">分支转向：</p>
                  <div class="select-box" style="width:100%">
                    <el-form-item>
                      <el-select  size="mini" v-model="condition[branchIndex].to" placeholder="请选择下一步节点"
                        style="width: 100%" clearable filterable>
                        <el-option
                          v-for="node in nodeList"
                          :label="node.data.name"
                          :value="node.id"
                          v-show="!node.viewOnly && node.id !== currentData.id"
                          :key="node.id">
                          </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </template>
              </div>
            </draggable>
            <el-button type="primary" round style="width:100%" @click="addBranch" :disabled="condition.length > 3">
              <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
              添加分支</el-button>
          </el-collapse-item>
          <el-collapse-item name="next" title="下一步">
            <p class="label">其他分支：</p>
              <div class="select-box" style="width:100%">
                <el-form-item prop="default">
                  <el-select  size="mini" v-model="formData.default" placeholder="请选择下一步节点"
                    style="width: 100%" clearable @change='defaultChange' filterable>
                    <el-option
                      v-for="node in nodeList"
                      :label="node.data.name"
                      :value="node.id"
                      v-show="!node.viewOnly && node.id !== currentData.id"
                      :key="node.id">
                      </el-option>
                  </el-select>
                </el-form-item>
              </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type='danger' size="mini">删除</el-button>
    </template>
  </continer>
</template>
<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import nodeEidtMixins from './nodeEidtMixins'
import draggable from 'vuedraggable'
import zbTipInput from '@/components/zbTipInput/index.vue'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
@Component({
  name: 'im-node-date',
  components: { continer, draggable, zbTipInput }
})
export default class extends Mixins(nodeEidtMixins) {
  private $message: any
  private $getCache: any
  private $store: any
  private activeNames = ['branch', 'next']

  private systemOpt = [
    { label: '渠道类型', value: 'platform' }
  ]

  get platformOpt () {
    return this.$store.state.common.publicCache.platform || []
  }

  private selectOpt = [
    { name: '等于', id: 'eq' },
    { name: '不等于', id: 'neq' },
    { name: '包含', id: 'in' },
    { name: '不包含', id: 'nin' }
  ]

  private collapseChange (val) {
    console.log(val)
  }

  private addBranch () { // 添加分支
    if (this.condition.length > 3) {
      return false
    }
    this.condition.splice(this.condition.length - 1, 0, {
      label: '',
      value: '',
      to: '',
      customValue: [{ branchCondiArr: [{ parameterType: 'custom', parameter: '', conditions: 'eq', value: '' }] }]
    })
  }

  private addCondition (index: number) {
    if (this.condition[index].customValue[0].branchCondiArr.length >= 10) {
      this.$message.error('最多只能添加10个条件')
      return false
    }
    this.condition[index].customValue[0].branchCondiArr.push(
      { parameterType: 'custom', parameter: '', conditions: 'eq', value: '' }
    )
  }

  private selectChange (name, index): void {
    this.condition[index].label = name || `分支${index + 1}`
  }

  private defaultChange (value) {
    this.condition[this.condition.length - 1].to = value
  }

  private delBranch (index: number) { // 删除分支
    this.condition.splice(index, 1)
  }

  private delCondition (branchIndex: number, branchCondiIndex: number) { // 删除条件
    this.condition[branchIndex].customValue[0].branchCondiArr.splice(branchCondiIndex, 1)
  }

  private parameChange (val: string, branchIndex: number, branchCondiIndex: number) {
    this.condition[branchIndex].customValue[0].branchCondiArr[branchCondiIndex].parameter = ''
    this.condition[branchIndex].customValue[0].branchCondiArr[branchCondiIndex].value = ''
    this.condition[branchIndex].customValue[0].branchCondiArr[branchCondiIndex].conditions = 'eq'
  }
}
</script>
<style lang="stylus" scoped>
  .label
    font-size 12px
    margin-bottom 5px
  .V7_iconfont
    font-size 12px
    cursor pointer
  .branchItem
    background-color #f5f5f5
    padding 10px
    margin 10px 0px
    border-radius 4px
  .branchItem:hover
    cursor pointer
  .conditionsBox
    position relative
    padding 10px
    background-color #c1c1c1
    border-radius 4px
    margin 10px 0px
  .conditionItem
    position relative
  .text
    position absolute
    top calc(50% - 5px)
  .lineItem
    position relative
    padding-left 20px
  .line
    top 35px
    display flex
    align-items center
    left 0
    font-weight 600
    width 20px
    height calc(100% + 16px)
    position absolute
    border-right 1px solid rgba(0,0,0,.1)
  .condition
    margin-bottom 16px!important
    padding-left 16px
    position relative
    display flex
  .condition:before
    content ""
    position absolute
    display block
    left 0
    top 35px
    height 1px
    width 16px
    background-color rgba(0,0,0,.1)
  .iconfont-left
    margin-left 6px
  .addCondition
    margin-left 36px
    position relative
    height 68px
  .addCondition:before
    content ""
    position absolute
    display block
    left -16px
    top 50%
    height 1px
    width 16px
    background-color rgba(0,0,0,.1)
  .delCondition
    line-height 78px
    margin-left 10px
</style>
